<template>
  <div class="main-page" style="min-width:1366px;">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <div class="SearchT">
        <div class="tableLable">数据管理</div>
        <!-- <a href="http://yuwenbincl.xicp.net:18090/core/resistrate/download-excel">下载耐药率模板</a> -->

        <el-button
          :loading="downloadLoading"
          icon="el-icon-document"
          type="primary"
          class="BatchDeleBtn"
          style="width:140px"
          @click="DownloadMoban()"
          size="small"
        >下载耐药率模板</el-button>

        <el-button
          type="primary"
          class="BatchDeleBtn"
          @click="open"
          style="width:100px"
          size="small"
        >清空耐药率</el-button>

        <el-button
          type="primary"
          class="BatchDeleBtn"
          style="width:100px"
          @click="UploadList()"
          size="small"
        >导入耐药率</el-button>
      </div>
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="ResistrateList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          >
          <el-table-column label="全选" type="selection" width="40" />
          <el-table-column label="序号" type="index" width="50"></el-table-column>

          <el-table-column prop="userDrugCode" label="医院药品编码" show-overflow-tooltip width="120" />
          <el-table-column prop="userDrugName" label="医院药品名称" show-overflow-tooltip width="300" />
          <el-table-column prop="bacteriaName" label="细菌名称" show-overflow-tooltip />
          <el-table-column prop="resistrate" label="耐药率" show-overflow-tooltip width="200" />
          <el-table-column label="设置时间" show-overflow-tooltip>
            <template slot-scope="scope">{{getData(scope.row.addDate)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="uploadVisible" width="25%" :before-close="handleClose">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getResistrateList,
  getdate,
  downloadExcel,
  clearResistrate
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  created: function() {
    this.getResistrateList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      console.log(newPage);
    },
    handleClose(done) {
      done();
    },
    async getResistrateList() {
      let _this = this;
      let res = await this.$rad.getResistrateList({
        drugCode: _this.queryInfo.drugCode,
        drugName: _this.queryInfo.drugName,
        bacteriaName: _this.queryInfo.bacteriaName,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      console.log(res);
      this.ResistrateList = res.rows;
    },
    getData(data) {
      return this.$rad.getdate(data);
    },
    async DownloadMoban() {
      window.open();
      // this.downloadLoading = true;
      // import("@/vendor/Blob").then(excel => {
      //   const tHeader = ["药品编码", "药品名称", "细菌名称", "耐药率"];
      //   // const filterVal = [
      //   //   "id",
      //   //   "title",
      //   //   "author",
      //   //   "pageviews",
      //   //   "display_time"
      //   // ];
      //   // const list = this.list;
      //   const data = ["12345", "阿卡波糖片", "大肠杆菌", "45"];
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: "耐药率模板",
      //     autoWidth: true,
      //     bookType: "xlsx"
      //   });
      // });
    },

    async clearResistrate() {
      let res = await this.$rad.clearResistrate();
      console.log(res);
      if (res.code == 1) {
        this.getResistrateList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    open() {
      this.$confirm("此操作将永久清除所有耐药率, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.clearResistrate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    UploadList() {
      this.uploadVisible = true;
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        drugCode: "",
        drugName: "",
        bacteriaName: "",
        page: "",
        pageSize: ""
      },
      uploadVisible: false,
      ResistrateList: [],
      downloadLoading: false
    };
  }
};
</script>
<style scoped>
.main-page {
  font-size: 12px;
}
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>
